import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
// import './index.css';
import { Table, Icon, Divider, Menu, Dropdown } from 'antd';


import '../static/base.css'
import '../static/app.css'
import Pop from './popup.jsx';
const menu = (
  <Menu>
    <Menu.Item>
      <a href="#">加入样本</a>
    </Menu.Item>
    <Menu.Item>
      <a href="#">标记已阅</a>
    </Menu.Item>
  </Menu>
);

const columns = [{
  title: 'ID',
  dataIndex: 'ID',
  key: 'ID',
  width: 50,
  render: text => <a href="javascript:;">{text}</a>,
}, {
  title: '标题',
  dataIndex: 'headline',
  key: 'headline',
  width: 330,
}, {
  title: '来源',
  dataIndex: 'source',
  key: 'source',
  width: 152,
}, {

  title: '发布时间',
  dataIndex: 'release',
  key: 'release',
  sorter: (a, b) => a.release.replace(/[-\:\s]/g, '') - b.release.replace(/[-\:\s]/g, ''),
}, {
  title: '监测时间',
  dataIndex: 'monitor',
  key: 'monitor',
  sorter: (a, b) => a.monitor.replace(/[-\:\s]/g, '') - b.monitor.replace(/[-\:\s]/g, ''),
},
{
  title: '操作',
  key: '操作',
  width: 360,
  render: (text, record) => (
    <span>
      <a href="javascript:;" onClick={()=>{
        this.look(0)
      }}>查看 {record.name}</a>
      <Divider type="vertical" />
      <a href="javascript:;" className='delete' onClick={()=>{
        this.look(1)}}>删除</a>
      <Divider type="vertical" />
      <Dropdown overlay={menu}>
        <a href="javascript:;" className="ant-dropdown-link judgments"  onClick={()=>{
        this.look(2)}}>
          研判 <Icon type="down" />
        </a>
      </Dropdown>

    </span>
  ),
}];

const data = [];
const headline = ['从架构角度来看 Java 分布式日志如何收集'];
let release = ['2018-07-30 13:37', '2018-07-30 12:37', '2018-07-30 14:37', '2018-07-30 19:37', '2018-07-30 11:37', '2018-07-30 17:33', '2018-07-30 17:30']
let monitor = ['2018-07-30 13:37', '2018-07-30 12:37', '2018-07-30 14:37', '2018-07-30 19:37', '2018-07-30 11:37', '2018-07-30 17:33', '2018-07-30 17:30']
for (let i = 1; i <= 7; i++) {
  data.push({
    key: i,
    ID: `${i}`,
    headline: `${headline}`,
    source: `网易新闻App`,
    release: `${release[i - 1]}`,
    monitor: `${monitor[i - 1]}`,
    description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
  });
}

const expandedRowRender = record => <p>{record.description}</p>;

const footer = () => '一些用户经常需要查看的，或横向对比的信息用户可以省去不断点击查看详情，再返回来查看的麻烦当然，这里的内容形式不只是表格，也可以是段落，信息组，甚至图表...一些用户经常需要查看的，或横向对比的信发生地方的发生的的丰富的是非官方的和规范';

export default class app extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      rowSelection: {},
      expandedRowRender,
      footer,
      index:0,
      display:'none'
    }
  }
  handleChange = (sorter) => {

    this.setState({
      sortedInfo: sorter,
      index: 0
    });

  }
  look(index){

    this.setState({
      index:index,
      display:'block'
    })
  }
  render() {

    return (
      <div className='app'>
        <Pop index={this.state.index} display={this.state.display}/>
        <div className="app-header">
          <div className="app-top">
            <ul>
              <li>语言：</li>
              <li>全部</li>
              <li>中文</li>
              <li>藏文</li>
              <li>英语</li>
              <li>其他</li>
            </ul>
            <ul>
              <li>浏览倾向：</li>
              <li>全部</li>
              <li>已阅</li>
              <li>未阅</li>
            </ul>
          </div>
          <div className="app-top">
            <ul>
              <li>时间：</li>
              <li>今日</li>
              <li>昨日</li>
              <li>近三日</li>
              <li>近七日</li>
              <li>自定义</li>
            </ul>
          </div>
        </div>
        <div className='app-conter'>
          <p>共搜索到 <span>922</span> 条数据</p>
          <div className='app-conter-div'>
            <img src={require("./../static/image/blueTips.png")} />
            <span> 已选择 4 项 </span>
            <span className='app-conter-div-lastspan'>清空</span>
          </div>
          <div className='app-conter-box'>
            <div className='app-conter-top'>
              <ul>
                <li className='active'>导出</li>
                <li>研判</li>
                <li>删除</li>
                <li>加入样本库</li>
                <li>标记已阅</li>
              </ul>

            </div>
            <div>
              <Table {...this.state} columns={columns} dataSource={data} onChange={this.handleChange} />
            </div>
          </div>
        </div>
      </div>
    )


  }
}